<template>
    <form-item 
        :designer="designer" 
        :field="field" 
    >
        <el-divider :content-position="contentPosition" >
            {{state.fieldVal}}
        </el-divider>
    </form-item>
</template>

<script setup>
import { computed, nextTick, onMounted, reactive} from 'vue';
import FormItem from './form-item.vue';

defineOptions({
    name:"xy-divider"
})
const props = defineProps({
    designer:{
        type:Object,
        default:()=>({})
    },
    field:{
        type:Object,
        default:()=>({})
    },
    formModel:{
        type:Object,
        default:()=>({})
    }
})
const state = reactive(({
    fieldVal:""
}))

const contentPosition = computed(()=>{
    return props.field.options.contentPosition
})

const setFieldVal = val=>{  
    state.fieldVal = val
}

onMounted(()=>{
    if(props.field && props.field.options.defaultValue){
        // 存在默认值的情况下进行初始化
        setFieldVal(props.field.options.defaultValue)
    }
    
    nextTick(()=>{
        if(!props.designer) return
        props.designer.createFieldValFun(props.field.id, setFieldVal)
    })
})
</script>

<style lang="scss" scoped>
:deep(.el-form-item)    {
    .el-form-item__label{
        overflow: hidden!important;
        width: 0!important;
    }
    .el-divider__text{
        background-color: transparent;
    }
}
</style>
